- This handy little guide is perfect for anyone who wants to make a web page, but has no clue where
to start. This will give you a guideline to follow to start you on your way. So without any further ado,
open up Notepad in Windows, or any basic text editor and let's get started.
The Very Beginning
Let's start with a new file. Now type the following:
- <html>
</html>
- This will tell the browser that this is definantly a web page. All other tags go within these tags. Notice
how each tag has an ending </...>? This tells the browser to end whatever the difinition is.
This is very important to remember. Now let's define some of the page definitions. Add the following:
- <html>
<head><title>New Web Page</title>
</head>
</html>
- Here we have defined the head of the page. We also have defined the title of the page, which is called New Web Page.
Now go to File > Save, and save it as index.html (or index.htm on win 3.x). Open up Netscape and view
the file. You should be able to see at the top Netscape - [New Web Page]. You've just made a huge leap. Now let's start
defining the pages layout. First we'll define the body of the page:
- <html>
<head><title>New Web Page</title>
</head>
<body>
</body>
</html>
- The body defines what colors are to be used in the page for links, background and text. The
plain <body> tag will render the defaults: a gray background with black text, blue links, etc. etc.
Boring. But you can define these to be whatever you want. Like so:
Let's say you want a balck background, with white text, light blue links, dark blue links if the person
has already visited the page, and red if the link is active. You would add the following:
- < body bgcolor="#000000" text="#ffffff" link="#00FFFF" vlink="#0000FF" alink="#FF0000">
-
Bgcolor stands for background color, text defines the text color, link defines the colors of all unvisited links,
vlink defines the link color if the person has visited the page, and alink defines the color of the link
if the page is loading. If you have no idea how to get the RGB codes for the colors, you can
visit my RGB Color Code Chart try out this handy little color code program.
Ok. We've mad a page with a title and have colors on the page. Now we have to add content.
Adding Content
The content of the page depends on you. You can add whatever you like. We'll just show you how to do it.
Let's say we're gonna make a page about cars. Let's insert a little paragraph about the page:
- <html>
<head><title>New Web Page</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#00FFFF" vlink="#0000FF" alink="#FF0000">
Welcome to my new page about cars. I hope to make this the best web page about cars on the planet.
Keep coming back to see all the stuff i have to offer.
</body>
</html>
- Now you've adding some content. Make sure to save it. You can view your progress here. We have a black web
page with white text. Now let's add a link to another page:
Links
Adding a link is fairly easy. Just add the following:
- <a href="http://www.domain.com/file.html">This is a link</a>
- This tells the browser that the words within the ..">...</a> should link to http://www.domain.com/file.html. If this was to be
a link to a file within your same directory, you could just do <a href="file.html">This is a link</a>. It would still work fine.
You can also add a link to have the person send you email. It follows the same outline, but it's just a little different, as follows:
- <a href="mailto:you@youremail.com">Email Me!</a>
- This would allow someone to click on Email Me! and be able to send email to you through
the browser. Here's an example.
Adding Pictures
You can also add graphics to add spice to your page by adding graphics. To do this, just use the basic following rule:
- <img src="file.gif">
- This tells the browser to load an image named file.gif on the page. It can only be a .gif or .jpg image. These are currently the only
two formats supported for web pages. It helps if you supply the browser with the dimensions of
the file being loaded. You can do this by adding the width and height attributes within
the tag. Like so:
- <img src="file.gif" width=400 height=300 alt="This is my picture>
- The alt gives an alternate description for the graphic. This way in case the visitor has a text-only browser, they can see what should be
there. You can also have the picture be a link. Like so:
- <a href="file.html"><img src="file.gif" width=400 height=300 alt="This is my picture></a>
- So, let's put it all together. Here's our code:
- <html>
<head><title>New Web Page</title>
</head>
<body bgcolor="#000000" text="#ffffff" link="#00FFFF" vlink="#0000FF" alink="#FF0000">
Welcome to my new page about cars. I hope to make this the best web page about cars on the planet.
Keep coming back to see all the stuff i have to offer.
<p>
Here's a picture of my <a href="favorite.html"><img src="car.gif">favorite car</a>.
<p>
Please <a href="mailto:me@here.com">mail me</a>.
</body>
</html>
- The paragraph tag <p> allows you to seperate text. To see more ways to control the layout
of text, be sure
| |
